<template>
  <div class="date-picker-container">
    <input
      type="text"
      v-model="date"
      @click="visible = !visible"
      class="date-input"
    />
    <!-- 
      selected-date: 需要高亮显示的日期 
      highlight-current-date: 是否高亮显示当天日期, 默认值为true
    -->

    <DateView
      class="date-view"
      v-model="date"
      :highlight-today="false"
      v-show="visible"
      @hidden="visible = $event"
    />
  </div>
</template>

<script>
import DateView from "./DateView";
export default {
  data() {
    return {
      date: "",
      visible: false,
    };
  },
  props: {
    modelValue: String,
  },
  components: {
    DateView,
  },
  created() {
    this.date = this.modelValue;
  },
  watch: {
    date(newValue) {
      this.$emit("update:modelValue", newValue);
    },
  },
};
</script>

<style>
.date-picker-container {
  position: relative;
}
.date-input {
  border: 1px solid #eee;
  outline: none;
  height: 30px;
  width: 390px;
  padding-left: 10px;
  border-radius: 4px;
}
.date-view {
  width: 400px;
  height: 340px;
  position: absolute;
  top: 40px;
  z-index: 999;
}
</style>